<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .active {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <!-- 

Root
      todo-add
      todo-list
        todo-item
        todo-item
      todo-filter

     -->

    <div id="app">
      <h1>todos</h1>
      <todo-add @translate-new-todo="addTodo"></todo-add>
      <todo-list
        :todos="todos"
        @xx-delete-todo-by-id="deleteTodo"
        @xx-toggle-todo-by-id="toggleTodo"
      >
      </todo-list>
      <todo-filter></todo-filter>
    </div>

    <script>
      var todos = [
        {
          id: 1,
          text: "123",
          complated: true,
        },
        {
          id: 2,
          text: "456",
          complated: false,
        },
        {
          id: 4,
          text: "789",
          complated: false,
        },
      ];

      Vue.component("todo-add", {
        template: `
        <header>
          <input type="checkbox" />
          <input type="text" v-model="val" @keyup.enter="translateNewTodo" />
        </header>
        `,
        data: function () {
          return {
            val: "000",
          };
        },
        methods: {
          translateNewTodo: function () {
            // console.log(this.val);
            this.$emit("translate-new-todo", this.val);
            this.val = "";
          },
        },
      });
      Vue.component("todo-list", {
        props: ["todos"],
        template: `
        <ul>
          <todo-item
            v-for='todo in todos'
            :key="todo.id"
            :todo="todo"
            @delete-todo-by-id="$emit('xx-delete-todo-by-id', $event)"
            @toggle-todo-by-id="$emit('xx-toggle-todo-by-id', $event)"
          >
          </todo-item>
        </ul>
        `,
      });
      // $event 代指自定义事件的参数   ？dom事件对象
      Vue.component("todo-item", {
        props: ["todo"],
        template: `
        <li :class="{active: todo.complated}">
          <input type="checkbox" :checked="todo.complated" @change="changeHandler(todo.id, $event)" />
          <span>{{todo.text}}</span>
          <i @click="$emit('delete-todo-by-id', todo.id)">X</i>
        </li>
        `,
        methods: {
          changeHandler: function (id, event) {
            // console.log("change", id, event.target.checked);
            this.$emit("toggle-todo-by-id", {
              id,
              complated: event.target.checked,
            });
          },
        },
      });
      Vue.component("todo-filter", {
        template: `
        <footer>
          filter
        </footer>
        `,
      });

      var app = new Vue({
        el: "#app",
        data: {
          todos: todos,
        },
        methods: {
          // 添加
          addTodo: function (text) {
            console.log("root", text);
            this.todos.push({
              // id: Date.now(),
              id: Math.max(...this.todos.map((t) => t.id)) + 1,
              text,
              complated: false,
            });
          },
          // 删除
          deleteTodo: function (id) {
            console.log("deleteTodo", id);
            this.todos = this.todos.filter((t) => t.id !== id);
          },

          toggleTodo: function ({ id, complated }) {
            // console.log("toggleTodo", id, complated);
            this.todos = this.todos.map((todo) => {
              if (todo.id !== id) {
                return todo;
              } else {
                return { ...todo, complated };
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
